<template>
  <div class="page has-navbar" v-nav="{ title: '花单查询', showBackButton: true, onBackButtonClick: back,showMenuButton: true,onMenuButtonClick: menu }">
    <div class="page-content text-center">
      <div class="personMsg">
        <div class="headImg">
          <img src="../image/headImg.jpg" alt="">
        </div>
        <div>
          <h3 class="name">正义的红领巾</h3>
          <p>ID：1159793978</p>
        </div>
      </div>
      <div class="list">
        <router-link to="/order">
          <div class="item item-ios">
            <i class="icon ion-ios-paper"></i> 我的订单
            <span class="item-note">
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
        </router-link>
        <router-link to="/cart">
          <div class="item item-ios">
            <i class="icon ion-ios-cart"></i> 购物车
            <span class="item-note">
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
        </router-link>
        <router-link to="/coupons">
          <div class="item item-ios">
            <i class="icon ion-ios-albums"></i> 我的优惠券
            <span class="item-note">
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
        </router-link>
        <router-link to="">
          <div class="item item-ios">
            <i class="icon ion-card"></i> 我的积分
            <span class="item-note">
              <span>496</span>
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
        </router-link>
        <router-link to="/address">
          <div class="item item-ios">
            <i class="icon ion-ios-location"></i> 收货地址
            <span class="item-note">
              <i class="icon ion-chevron-right"></i>
            </span>
          </div>
        </router-link>
      </div>
      <MenuBotton></MenuBotton>
    </div>
  </div>
</template>

<script>
    import MenuBotton from '../components/MenuBotton'
    export default {
      name: "QueryFrom",
      components : {
        MenuBotton
      },
      methods : {
        back(){
          this.$router.back('/')
        },
        menu(){

        }
      }
    }
</script>

<style scoped lang="less">
*{
  padding: 0;
  margin: 0;
  text-align: start;
}
  .personMsg{
    padding: 30px 15px;
    display: flex;
    align-items: center;
    background: #ffffff;
    margin-bottom: 30px;
    border-bottom: 1px solid #cccccc;
    .headImg{
      width: 100px;
      height: 100px;
      border: 1px solid #cccccc;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      margin-right: 15px;
      overflow: hidden;
      img{
        width: 100%;
      }
    }
    p{
      line-height: 30px;
      color: #999999;
    }
  }
  .list{
    .item{
      padding-left: 15px;
      padding-right: 15px;
      >i{
        font-size: 20px;
        margin-right: 15px;
        color: #96ceec;
      }
      .item-note span{
        margin-right: 15px;
      }
    }
  }
</style>
